<template>
    <div class="bgc">
        <Header></Header>
        <Nav></Nav>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }, { pattern: usernamepattern, message: '请输入5-10字符,只能是a-zA-Z0-9' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern: passwordPattern, message: '请输入6-12字符,只能是a-zA-Z0-9' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :disabled="flag">
                    登录
                </van-button>
            </div>
        </van-form>
        <van-overlay :show="show" class="loadingBox">
            <van-loading type="spinner" color="#1989fa" class="loading" />
        </van-overlay>
    </div>
</template>

<script setup>
import Header from '@/components/login/header/Header.vue'
import Nav from '@/components/login/nav/Nav.vue'
import { useLoginHandler } from '@/hooks/login/useUser'
const { usernamepattern, passwordPattern, show, flag, username, password, onSubmit } = useLoginHandler()
</script>

<style lang="scss" scoped>
.bgc {
    background-color: #fff;
    height: 100%;

    .loadingBox {
        display: flex;
        justify-content: center;

        .loading {
            line-height: 600px;

        }
    }
}
</style>